<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慧题通-分类管理</title>
</head>
<body>
<el-menu
        id="menu"
        default-active="0"
        class="el-menu-vertical-demo"
        style="width: 135px;float: left"
>
    <el-menu-item index="0">
        <i class="el-icon-help"></i>
        <span slot="title">主页</span>
    </el-menu-item>
    <el-menu-item index="1" @click="toMyQuestion">
        <i class="el-icon-location"></i>
        <span slot="title">我的题目</span>
    </el-menu-item>
    <el-menu-item index="2" @click="toAllQuestion">
        <i class="el-icon-menu"></i>
        <span slot="title">全站题目</span>
    </el-menu-item>
    <el-menu-item index="3" @click="toDoQuestion">
        <i class="el-icon-setting"></i>
        <span slot="title">练习题目</span>
    </el-menu-item>
    <el-menu-item index="4" @click="toAddQuestion">
        <i class="el-icon-document"></i>
        <span slot="title">添加题目</span>
    </el-menu-item>
</el-menu>

<div id="app" v-loading="loading" style="overflow: scroll;height: 100%">
    <el-page-header @back="goBack" content="分类管理">
    </el-page-header>
    <el-card
            v-for="(category, index) in categories"
            :key="index"
            shadow="hover"
            body-style="display: flex; justify-content: space-between; align-items: center; padding: 5px; margin: 0px;"
            style="margin-top: 15px; margin-left: 15px; width: 500px; height: 50px"
    >
        <div>
            <span>{{ category.name }}</span>
            <span style="color: #909399">({{ categoryOpen[parseInt(category.open)] }})</span>
        </div>
        <div>
            <el-button type="text" @click="editCategory(index)">修改</el-button>
            <el-button type="text" @click="deleteCategory(index)" style="color: red">删除</el-button>
        </div>
    </el-card>

    <!--修改分类对话框-->
    <el-dialog title="修改分类" :visible.sync="editingCategory" v-loading="loadingEditCategory">
        <el-form :model="currentCategory" label-position="right" label-width="80px" style="width: 100%">
            <el-form-item label="名称">
                <el-input v-model="currentCategory.name"></el-input>
            </el-form-item>
            <el-form-item label="公开">
                <el-switch v-model="currentCategory.open"
                           active-value="1"
                           inactive-value="0">
                </el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelEdit">取 消</el-button>
            <el-button type="primary" @click="finishEdit">确 定</el-button>
        </div>
    </el-dialog>
</div>

</body>

<script src="../../js/vue.js"></script>
<script src="../../js/axios-0.18.0.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">

<link rel="stylesheet" href="../../css/main.css">

<script src="../../js/common.js"></script>
<script src="../../js/menu.js"></script>
<script src="../../js/category_manage.js"></script>

</html>